<template>
  <el-container>
    <el-main>
      <el-card class="login_pannel">
        <div class="login_pannel_title">
          <h1>THINK</h1>
        </div>
        <el-divider></el-divider>
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          label-width="45px"
          class="login_pannel_form"
        >
          <el-form-item label="账号" prop="account">
            <el-input v-model="formData.account" placeholder="请输入账号"
              ><i slot="prefix" class="el-input__icon el-icon-user"></i
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="formData.password"
              autocomplete="off"
              placeholder="请输入密码"
              @keyup.enter.native="submitForm('formData')"
              ><i slot="prefix" class="el-input__icon el-icon-key"></i
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="login_pannel_button">
          <el-button
            type="primary"
            @click="submitForm('formData')"
            :loading="isLoading"
            loading-text="正在登录中..."
            >登录</el-button
          >
          <el-button @click="resetForm('formData')">重置</el-button>
        </div>
      </el-card>
    </el-main>
    <el-footer>
      <div class="copyright_info">
        <span>Power by think</span>
      </div>
    </el-footer>
  </el-container>
</template>

<script >
export default {
  data() {
    var checkAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      } else {
        callback();
      }
    };
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      isLoading: false,
      formData: {
        account: "",
        password: "",
      },
      rules: {
        account: [{ validator: checkAccount, trigger: "blur" }],
        password: [{ validator: checkPass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formData) {
      // 把加载状态改成true
      this.isLoading = true;
      this.$refs[formData].validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("user/login", this.formData)
            .then((res) => {
              this.$message.success("登录成功！");
              this.$router.push("/home");
              // 把加载状态改成false
              this.isLoading = false;
            })
            .catch((error) => {
              this.$message.error(error.message);
              // 把加载状态改成false
              this.isLoading = false;
            });
        } else {
          console.log("error submit!!");
          this.isLoading = false;
          return false;
        }
      });
    },
    resetForm(formData) {
      this.$refs[formData].resetFields();
    },
  },
};
</script>

<style scoped>
.login_pannel {
  margin: auto;
  margin-top: 5%;
  width: 29rem;
  border-radius: 20px;
}

.login_pannel_title {
  margin: auto;
  margin-bottom: 5%;
  text-align: center;
}

.login_pannel_form {
  margin: 12% 0;
}

.login_pannel_button {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  /*外层元素属性设置为center*/
  width: 25rem;
}

.copyright_info {
  text-align: center;
  color: #ccc;
}
</style>